<template>
  <div class="wrap">
    <x-header title="收支明细"></x-header>
    <tab>
      <tab-item selected @on-item-click="onItemClick">账户收支</tab-item>
      <tab-item @on-item-click="onItemClick">点位收支</tab-item>
    </tab>
    <div class="wrapper" ref="wrapper" v-show="tableIndex==0" >
      <group title="余额">
        <cell title="可用余额" :value="availableBalance"></cell>
        <cell title="锁定余额" :value="lockedBalance"></cell>
      </group>
      <group title="收支明细">
        <selector @on-change="monthChange" direction="left" title="月份" :options="monthList" v-model="selMonth"></selector>
      </group>
      <ul class="content">
        <li v-for="item in fList" :key="item.id">
          <p class="p1"><span>{{item.uBusinessTypeName}}</span><span>{{item.tradingName}}</span><span>{{item.changedAmount}}</span></p>
          <p class="p2"><span>{{item.creationTime | moment}}</span><span>变化前:{{item.beforeChangedAmount}}</span><span>余额:{{item.afterChangedAmount}}</span></p>
        </li>
      </ul>
    </div>
    <div class="wrapper" ref="wrapper2" v-show="tableIndex==1" >
      <popup-picker title="点位" :data="npList" :columns="1" v-model="selNetPointId" show-name></popup-picker>
      <group title="收支明细">
        <selector @on-change="monthChange2" direction="left" title="月份" :options="monthList" v-model="selMonth2"></selector>
        <ul class="content">
          <li v-for="item in npFList" :key="item.id">
            <p class="p1"><span>{{item.pBusinessTypeName}}</span><span></span><span>{{item.changedAmount}}</span></p>
            <p class="p2"><span>{{item.creationTime | moment}}</span><span>变化前:{{item.beforeChangedAmount}}</span><span>余额:{{item.afterChangedAmount}}</span></p>
          </li>
        </ul>
      </group>
    </div>
  </div>
</template>

<script>
// import BScroll from 'better-scroll'
import { PopupPicker, Cell, XHeader, Selector, Group, Tab, TabItem } from 'vux'
import { GetUserFinancialPageList } from '@/api/user'
import { GetMyNetPoints, GetNetPointFinancialPageList } from '@/api/netPoint'
import { Toast } from 'mint-ui'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  components: {
    PopupPicker,
    XHeader,
    Selector,
    Group,
    Cell,
    Tab,
    TabItem
  },
  data() {
    return {
      tableIndex: 0,
      npList: [],
      selNetPointId: [],
      currentNetPointId: 0,
      allLoaded: false,
      bottomStatus: '',
      fList: [],
      npFList: [],
      selMonth: '',
      selMonth2: '',
      monthList: [],
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 10000,
        startDate: '',
        endDate: '',
        userId: 0
      },
      qnp: {
        sorting: '',
        startPage: 1,
        pageCount: 10000,
        startDate: '',
        endDate: '',
        netPointId: 0
      },
      pullup: true
    }
  },
  watch: {
    selNetPointId: function(newVal, oldVal) {
      this.qnp.netPointId = parseInt(newVal[0])
    }
  },
  computed: {
    ...mapGetters([
      'availableBalance',
      'lockedBalance'
    ])
  },
  methods: {
    getNetPoints() {
      var _this = this
      GetMyNetPoints().then(result => {
        _this.npList = result.data.map(x => {
          return {
            name: `${x.id}   ${['A', 'B', 'C'][x.netType]}网   ${_this.$moment(x.creationTime)}`,
            value: x.id.toString()
          }
        })
        _this.selNetPointId = [_this.npList[0].value]
      })
    },
    onItemClick(index) {
      this.tableIndex = index
    },
    setMonth() {
      var mt = moment('2018-04-01')
      do {
        this.monthList.unshift(mt.format('YYYY-MM'))
        mt = mt.add(1, 'months')
      } while (mt.isBefore(new Date()))
      this.selMonth = this.monthList[0]
      this.selMonth2 = this.monthList[0]
    },
    handleBottomChange(status) {
      this.bottomStatus = status
    },
    monthChange() {
      this.getFinancialList()
    },
    monthChange2() {
      this.getNPFinancialList()
    },
    getFinancialList() {
      var _this = this
      _this.q.startDate = _this.selMonth + '-01'
      _this.q.endDate = moment(_this.q.startDate).add(1, 'months').format('YYYY-MM-DD')
      GetUserFinancialPageList(_this.q).then(result => {
        console.log(result)
        if (result.data.items.length > 0) {
          _this.fList = result.data.items
        } else {
          _this.fList = []
          Toast('没有数据')
        }
      })
    },
    getNPFinancialList() {
      var _this = this
      _this.qnp.startDate = _this.selMonth2 + '-01'
      _this.qnp.endDate = moment(_this.qnp.startDate).add(1, 'months').format('YYYY-MM-DD')
      GetNetPointFinancialPageList(_this.qnp).then(result => {
        console.log(result)
        if (result.data.items.length > 0) {
          _this.npFList = result.data.items
        } else {
          _this.npFList = []
          Toast('没有数据')
        }
      })
    }
    /* ,
    _initScroll() {
      if (!this.$refs.wrapper) {
        return
      }
      // better-scroll的初始化
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: true,
        scrollX: this.scrollX
      })
    } */
  },
  mounted() {
    // setTimeout(() => {
    //   this._initScroll()
    // }, 20)
  },
  created() {
    this.setMonth()
    this.getNetPoints()
    this.getFinancialList()
    this.getNPFinancialList()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wrap{
  height: 100%;
  .vux-header{
    z-index: 2;
  }
  .wrapper{
    height: calc(100% - 66px);
    border-top: 1px solid #ffffff;
    .content{
      li{
        padding: 5px 15px;
        border-bottom: 1px solid #dddddd;
        p{
          span{
            display: inline-block;
            width: 32%;
            text-align: left;
            font-size: 14px;
          }
        }
        .p1{
          span:nth-child(2){
            color: #aaaaaa;
          }
        }
        .p2{
          span{
            color: #aaaaaa;
          }
        }
      }
    }
  }
}
</style>
